<template>
  <div class="box">
    <div class="con">
      <!-- 头像 -->
      <div
        :class="['y', flag ? 'active' : '']"
        @mouseover.stop="hover"
        @mouseout="qu"
      >
        <img
          src="https://img2.baidu.com/it/u=596757155,3525367725&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=500"
        />
      </div>
      <!-- 表单 -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item prop="username">
          <el-input
            v-model="ruleForm.username"
            prefix-icon="el-icon-user"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="ruleForm.password"
            show-password
            prefix-icon="el-icon-lock"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item class="d">
          <el-button type="primary" @click="submitForm('ruleForm')"
            >登陆</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {mapActions} from 'vuex'
export default {
  components: {},
  data() {
    return {
      flag: false,
      ruleForm: {
        username: "admin",
        password: "123456",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  created() {},
  mounted() {},
  methods: {
    hover() {
      this.flag = true;
    },
    qu() {
      this.flag = false;
    },
    // 登陆
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 这里是通过封装的login接口发送请求
          // login(this.ruleForm).then((res) => {
          //   console.log(res);
          //   if (res.data.meta.status == 200) {
          //     this.$message({
          //       message: "恭喜你，登录成功",
          //       type: "success",
          //     });
          //     localStorage.setItem('token',res.data.data.token)
          //     this.$router.push('/home')
          //   }
          // });

          // 这里通过vuex的异步操作完成请求 
          // 因为actions里面这个函数使用了new promise所以这个函数的返回值就是promise，可以使用.then的方法
          this.$store.dispatch('seLogin',this.ruleForm).then(res=>{
            if(res.data.meta.status==200){
              this.$router.push('/home')
            }
          })

          // 这是同步请求
          // let res=login(this.ruleForm).then(res=>{return res})
          // console.log(res);

          


        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    ...mapActions(['seLogin'])
  },
};
</script>

<style scoped lang='scss'>
.box {
  width: 100%;
  height: 100%;
  position: relative;
  background: #4e5a9f;
  padding: 0 !important;
}
.con {
  width: 440px;
  height: 260px;
  background: white;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -220px;
  margin-top: -130px;
}
.y {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: black;
  margin: -50px auto;
  img {
    width: 94px;
    height: 94px;
    margin-left: 3px;
    margin-top: 3px;
    border-radius: 50%;
  }
}
.active {
  background: #35a5e5;
  box-shadow: 0 0 5px rgb(19, 171, 214);
  -webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  -moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}
.el-form {
  margin-top: 70px;
}
.el-form-item {
  width: 90%;
  margin: 20px auto;
}
.d {
  margin-top: 20px;
  margin-left: 60%;
}
</style>
